<!--
 * @Author: wjk
 * @Date: 2019-12-31 15:40:51
 * @LastEditors: wjk
 * @LastEditTime: 2020-11-05 10:09:19
 * @description: 精英销售榜
 -->
<template>
  <base-page-view class-name="page-container sale-top-ranking-container">
    <view class="top-rank">
      <view class="return-button" @click="_back">
        <image :src="`/static/images/icon/icon_return.png`" />
      </view>
      <view class="bg">
        <b-image width="750" height="580" src="/static/images/sale-top-ranking/bg_top.png" is-asset />
      </view>
      <view class="sale-time">
        <b-image width="391" height="40" src="/static/images/sale-top-ranking/bg_sale_time.png" is-asset />
        <view class="text">{{ rankData.title }}</view>
      </view>
    </view>
    <view class="top-3">
      <view v-for="(item, index) in rankTop" :key="index" :class="'member-item no'+ index" @click="toDetail(item)">
        <view class="bg">
          <b-image v-if="index !== 1" width="238" height="242" :src="`/static/images/sale-top-ranking/bg_top_0${item.ranking}.png`" is-asset />
          <b-image v-else width="228" height="274" src="/static/images/sale-top-ranking/bg_top_01.png" is-asset />
        </view>
        <view class="member-info">
          <view class="head-img">
            <image v-if="index !== 1" mode="aspectFill" is-head class="avatar" width="136" height="136" :src="item.image_photo_url || '/static/images/mine/touxiang.png'" @error="onImageLoad(item)" />
            <image v-else mode="aspectFill" is-head class="avatar" width="168" height="168" :src="item.image_photo_url || '/static/images/mine/touxiang.png'" @error="onImageLoad(item)" />
            <image class="no" :src="`/static/images/mine/icon_no_${item.ranking}.png`" />
          </view>
          <view class="member-name">{{ item.user_name }}</view>
          <view class="member-rate">{{ item.sales_volume | formatMoney }}</view>
          <view class="rate-name">销售额</view>
        </view>
      </view>
    </view>
    <view v-if="user && user.uid" class="user-block">
      <view class="block-line-1">
        <view class="user-info" @click="toDetail(rankData)">
          <image class="user-head" mode="aspectFill" width="88" height="88" :src="rankData.image_photo_url || '/static/images/mine/touxiang.png'" @error="onImageLoad(rankData)" />
          <view class="user-name">{{ rankData.user_name }}</view>
        </view>
        <view class="user-info">
          <image v-if="rankData.ranking < 4 && rankData.ranking > 0" :src="`/static/images/mine/icon_no_${rankData.ranking}.png`" class="no_image" />
          <view v-else class="user-no">{{ rankData.ranking || '未上榜' }}</view>
          <view class="subTitle">排行</view>
        </view>
        <view class="user-info">
          <view class="sale-no">{{ rankData.sales_volume | formatMoney }}</view>
          <view class="subTitle">销售额</view>
        </view>
      </view>
      <view class="block-line-2">
        <view class="skill" @click="toUrl">
          1分钟教你如何上榜
          <image class="arrow" :src="`/static/images/mine/icon_more_arrow.png`" />
        </view>
      </view>
    </view>
    <view class="rank-list-box">
      <view class="rank-title">
        <view class="title">排名</view>
        <view class="title">用户</view>
        <view class="title">销售</view>
      </view>
      <view class="rank-item-list">
        <view v-for="(item, index) in rankList" :key="index" class="rank-item" @click="toDetail(item)">
          <view class="id">{{ item.ranking }}</view>
          <view class="user">
            <image mode="aspectFill" class="user-head" is-head width="88" height="88" :src="item.image_photo_url || '/static/images/mine/touxiang.png'" @error="onImageLoad(item)" />
            <view class="user-name">{{ item.user_name }}</view>
          </view>
          <view>{{ item.show_volume }}</view>
        </view>
      </view>
    </view>
  </base-page-view>
</template>

<script>
import { pageNavigateBack, h5NavigateTo } from '@/utils/navigateTo.js'
import { mapGetters } from 'vuex'
import './index.scss'
export default {
  components: {
  },
  data() {
    return {
      head_img: '',
      rankData: {},
      rankTop: [],
      rankList: []

    }
  },
  computed: {
    ...mapGetters(['user'])
  },
  created() {
  },
  onLoad() {
    this.fetchData()
  },
  methods: {
    async fetchData() {
      const res = await this.$api.homeApi.saleTopRankingList({
        userId: this.user ? this.user.uid : ''
      })
      if (res.code) {
        return
      }
      this.rankData = res.data
      if (res.data.raking_list && res.data.raking_list.length) {
        this.rankList = res.data.raking_list.slice(3, 10)
        this.rankTop = [
          res.data.raking_list[1],
          res.data.raking_list[0],
          res.data.raking_list[2]
        ]
      }
    },
    onImageLoad(item) {
      this.$set(item, 'image_photo_url', 'https://asset.bisinuolan.cn/bixuan_uni/images/mine/touxiang.png')
    },
    _back() {
      pageNavigateBack()
    },
    toUrl() {
      h5NavigateTo(this.rankData.jump_url)
    },
    toDetail(item) {
      this.$navigateTo(`/pagesActivity/sale-top-ranking/detail?id=${item.user_id}`)
    }
  }
}
</script>
